<template>
<div class="navBody">
  <el-menu router default-active="task" class=" el-menu-vertical-demo" >
    <div>
      <el-menu-item index="task">
        <el-tooltip class="item" effect="dark" content="任务" placement="right">
          <i class="el-icon-menu"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item index="calender">
        <el-tooltip class="item" effect="dark" content="日历图" placement="right">
          <i class="el-icon-date"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item index="doIt">
        <el-tooltip class="item" effect="dark" content="习惯打卡" placement="right">
          <i class="el-icon-time"></i>
        </el-tooltip>
      </el-menu-item>
      <el-menu-item>
        <el-tooltip class="item" effect="dark" content="习惯打卡" placement="right">
          <i class="el-icon-document"></i>
        </el-tooltip>
      </el-menu-item>
    </div>



  </el-menu>
</div>
</template>

<script>
export default {
name: "ManPageLeft"
}
</script>

<style scoped>
.item{
  font-size: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 50%;

}
.navBody{
  width: 5%;
  min-width: 74px;
  height: 100%;
  box-shadow: #eae6e6 0 0 0 1px;
  background: rgba(227, 221, 221, 0.3);
  backdrop-filter: blur( 5.5px );
  -webkit-backdrop-filter: blur( 5.5px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.el-menu-vertical-demo{
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;

}


</style>